<template>
  <main>
    <div class="common-layout">
      <el-container>
        <el-header>
          <!--          <Top/>-->
        </el-header>
        <el-container>
          <el-aside>
            <!--            <Menu/>-->
          </el-aside>
          <el-main>
            <!--搜索框-->
            <el-row class="search">
              <el-col :span="6">
                <el-input v-model="typeName" style="width: 80%" placeholder="商品类型名称" clearable/>
              </el-col>
              <el-col :span="3">
              <el-button type="primary" @click="addOpen">新增类型</el-button>
              </el-col>
              <el-col :span="6" >
                <el-button type="success" @click="query">搜索</el-button>
              </el-col>
            </el-row>
            <div style="height: 20px;"></div>

            <!-- 表格 -->
            <el-table ref="tableRef" :data="dynamicList" border style="width: 100%">

              <el-table-column prop="id" label="序号" fixed="left" width="80" />
              <el-table-column prop="typeName" label="商品类型名称" width="100" />
              <el-table-column prop="myDesc" label="品牌类型描述" width="180" />
              <el-table-column label="操作" default="scope">
                <template #default="scope">
                  <el-button type="success"  @click="updateOpen(scope.row)">修改</el-button>
                  <el-button type="warning"  @click="selectOpen(scope.row)">选用品牌</el-button>
                  <el-button type="danger"  @click="del(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination background
                           layout="total, sizes, prev, pager, next, jumper"
                           v-model:current-page="pageNum"
                           v-model:page-size="pageSize"
                           :page-sizes="[2,5, 10, 50]"
                           :total="total"
                           @size-change="query"
                           @current-change="query"/>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </main>


  <el-dialog
      v-model="addDialogVisible"
      title="添加商品类型"
      width="500"
  >
    <el-form ref="addFormRef"  :model="addForm.addData" label-width="90" >

      <el-form-item label="商品类型名称" prop="typeName" >
        <el-input v-model="addForm.addData.typeName" placeholder="typeName" />
      </el-form-item>
      <el-form-item label="商品描述" prop="myDesc" >
        <el-input v-model="addForm.addData.myDesc" placeholder="myDesc" />
      </el-form-item>

    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetAdd">重置</el-button>
        <el-button type="primary" @click="addSecondGoods">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>



  <el-dialog
      v-model="updateDialogVisible"
      title="修改商品类型"
      width="500"
  >
    <el-form ref="updateFormRef"  :model="updateForm.updateData" label-width="90" >
      <el-form-item label="商品类型名称" prop="typeName" >
        <el-input  v-model="updateForm.updateData.typeName" placeholder="typeName" />
      </el-form-item>
      <el-form-item label="商品描述:" prop="myDesc" >
        <el-input v-model="updateForm.updateData.myDesc" placeholder="myDesc" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetupdate">重置</el-button>
        <el-button type="primary" @click="updateSubmit">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>

  <el-dialog
      v-model="selectBrandDialogVisible"
      title="选用商品类型"
      width="500"
  >

    <el-checkbox-group v-model="checkList1.brandIds">
      <el-checkbox label="华为" value="2" />
      <el-checkbox label="苹果" value="3" />
      <el-checkbox label="荣耀" value="4" />
      <el-checkbox label="魅族" value="6"  />
      <el-checkbox label="小米" value="7"  />
      <el-checkbox label="oppo" value="8"  />
      <el-checkbox label="apple" value="9"  />
      <el-checkbox label="Nike" value="10"  />
      <el-checkbox label="adidas" value="11"  />
      <el-checkbox label="三星" value="12"  />
      <el-checkbox label="vivo" value="13"  />
      <el-checkbox label="东来也" value="14"  />
<!--      <el-checkbox-->
<!--          label="selected and disabled"-->
<!--          value="Value selected and disabled"-->
<!--          disabled-->
<!--      />-->
    </el-checkbox-group>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetupdate">重置</el-button>
        <el-button type="primary" @click="selectSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>


</template>

<script setup>
// import Top from '../../components/Top.vue'
// import Menu from '../../components/Menu.vue'
import {ref, reactive, getCurrentInstance, onMounted, nextTick} from "vue";
import router from '@/router/index.js'
import {ElMessage, ElMessageBox} from 'element-plus'
import axios from '@/plugins/axios.js'

/*
* 公共变量
* */
const {proxy} = getCurrentInstance()



/**
 * 添加商品
 */
// let addFirstGoods = () => {
//   router.push({path: '/goods/addFirstGoods'})
// }
// let addSecondGoods = () => {
//   router.push({path: '/goods/addGoods'})
// }

const addFormRef = ref()
const addDialogVisible = ref(false)
const addForm = reactive({addData:{
    typeName:'',
    myDesc:''
  }})

const addOpen = ()=>{
  addDialogVisible.value = true;
  nextTick(()=>{
    addFormRef.value.resetFields();
  })


}
const addSecondGoods = ()=>{
  addDialogVisible.value = false;
  let params = JSON.stringify(addForm.addData);
  //操作数据 刷新页面数据
  operationData("goodsType/addType",params)


}
const resetAdd = ()=>{
  addFormRef.value.resetFields();
}



/**
 * 搜索
 * @type {Ref<UnwrapRef<*[]>>}
 */
const queryForm = ref({
  color:'',
  type:''
})
/**
 *
 * 下拉框
 */
const gcolor1 = ref("")
const gbrand = ref("")
const typeName = ref("")
const myDesc = ref("")
const options = [
  {
    value: '珍珠白',
    label: '珍珠白',
  },
  {
    value: '海湾蓝',
    label: '海湾蓝',
  },
  {
    value: '建窑紫',
    label: '建窑紫',
  },
  {
    value: '五彩斑斓的黑',
    label: '五彩斑斓的黑',
  }
]




/****************************************** **/


let dynamicList = ref([])

let gname = ref("")
let gmodel = ref("")
// let start_time = ref("")
// let end_time = ref("")
let total = ref(0)
let pageNum = ref(1)
let pageSize = ref(10)
let upsuccess = () => {
  ElMessage({
    type: "success",
    message: "上传成功"
  })
}
let uperror = () => {
  ElMessage({
    type: "danger",
    message: "上传失败"
  })
}
let query = () => {
  let url = "/goodsType/list";
  let param = {
    "pageSize": pageSize.value,
    "pageNum": pageNum.value,
    "typeName": typeName.value
  }
  console.log(param)
  axios.postJson(url, param).then(result => {
    console.log("------------结果是"+result.data.records.typeName)
    dynamicList.value = result.data.records;

    //首次查询直接给更新表单赋值
    //updateForm.value=result.data.records;
    // console.log(updateForm.gname+"----------------------修改表单的值")
    total.value = result.data.total;
  })

}
/**
 * 选择商品类型
 */
const selectTypeFormRef = ref()
const selectBrandDialogVisible = ref(false)
//const checkList = ref([rowId:  " ",'', ''])

const checkList1 = reactive({
       id: '',
  brandIds:['', '']
    }

)

//const selectId = ref("")
const selectOpen = (currentRow)=>{
  selectBrandDialogVisible.value = true
  checkList1.id = currentRow.id

  // let url = "/goodsType/getById";
  // let param = {
  //   "id": currentRow.id
  // }

  // axios.postJson(url, param)
  //     .then(resp=>{
  //       updateForm.updateData = resp.data;
  //       tempUpdateData = JSON.parse(JSON.stringify(resp.data));
  //     })
}

const selectSubmit = ()=>{
  selectBrandDialogVisible.value = false;
  // console.log(checkList1)
  // console.log(checkList1.brandList)
  let url = "/goodsType/updateBrandNameById";
  let params = JSON.stringify(checkList1)

  // let params = JSON.stringify(updateForm.updateData)
   console.log("------------插入的数据是"+params)
  // //操作数据 刷新页面数据
   operationData(url,params)
}
/**
 * 修改功能
 *
 *
 *
 * */

const updateFormRef = ref()
const updateDialogVisible = ref(false)
const updateForm = reactive({updateData:{
    typeName:'',
    myDesc:''
  }})

let tempUpdateData = {};

const updateOpen = (currentRow)=>{
  updateDialogVisible.value = true

  /*从服务接口取值*/
  let url = "/goodsType/getById";
  let param = {
    "id": currentRow.id
  }
  axios.postJson(url, param)
      .then(resp=>{
        updateForm.updateData = resp.data;
        tempUpdateData = JSON.parse(JSON.stringify(resp.data));
      })
}

const updateSubmit = ()=>{
  updateDialogVisible.value = false;
  let params = JSON.stringify(updateForm.updateData)
  // console.log("------------修改数据是"+params)
  //操作数据 刷新页面数据
  operationData("goodsType/updateType",params)
}

const resetupdate = ()=>{

  updateForm.updateData = JSON.parse(JSON.stringify(tempUpdateData));

  updateFormRef.value.resetFields();

  console.log(tempUpdateData)

}

const options2 = [
  {
    value: '5G手机',
    label: '5G手机',
  },
  {
    value: '4G手机',
    label: '4G手机',
  },
  {
    value: '充电线',
    label: '充电线',
  },
  {
    value: '手机壳',
    label: '手机壳',
  },
  {
    value: '充电器',
    label: '充电器',
  },
  {
    value: '智能手表',
    label: '智能手表',
  },
  {
    value: '智能手环',
    label: '智能手环',
  }
]



/**
 * 删除功能
 *
 */
const tableRef = ref();
const del=(gid)=>{
  //console.log(gid)

  ElMessageBox.confirm(
      `确定删除编号为[${gid}]的数据么`,
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error',
      }
  )
      .then(() => {
        console.log('发送ajax请求删除数据')
        let param = {
          "id": gid
        }
        operationData("goodsType/deleteType",param)
      })
      .catch(() => {
        ElMessage.info("取消删除")
      })




}

/**
 * 公共方法
 */

/*
* 公共函数
* */
const queryData = (params)=>{
  proxy.$axios.get(`goods/list?${params}`)
      .then((resp)=>{
        if (resp.data.returnCode == 80011){
          //给table更新数据
          tableList.tableData =resp.data.returnData
          //给分页组件更新数据
          pageInfo.pageData = resp.data.pageInfo
          console.log("---=---"+pageInfo.pageData)
          console.log(tableList.tableData)
          // queryData(params)
        }else if(resp.data.returnCode == 80012){
          //如果没有数据 保证组件正常使用
          tableList.tableData = [];
          pageInfo.pageData ={page:1,pageSize:5,total:0}
        }

      })
}

const operationData=(url,params)=>{
  axios.postJson(url, params)
      .then(resp=>{
        //1.弹窗显示结果
        console.log(resp.data)
        if(resp.code == 200){
          ElMessage.success("操作成功!")
        }else {
          ElMessage.error("操作失败!")
        }
        //2.刷新数据
        query();
      })
}



onMounted(() => {
  query();
})
</script>

<style scoped>

</style>